import "./index.css";

interface Props {
  title: string;
  subTitle: string;
  content: string;
  // 如果需要 children:
  children?: React.ReactNode;
}

/**
 * 1. 父向子组件传递 props
支持的类型如下：

string title={'测试'}
number id={1}
boolean isGirl={false}
null empty={null}
undefined empty={undefined}
object obj={ { a: 1, b: 2 } }
array arr={[1, 2, 3]}
function cb={(a: number, b: number) => a + b}
JSX.Element element={<div>测试</div>}

注意：我们需要遵守单向数据流，子组件不能直接修改父组件的props
 * 设置默认值：
 * 1. 
 * 
 * @param props 
 * @returns 
 */

export default function Card(props: Props) {
  return (
    <div className="card">
      <header>
        <div>{props.title}</div>
        <div>{props.subTitle}</div>
      </header>
      <main>{props.content}</main>
      <footer>
        <button>确认</button>
        <button>取消</button>
      </footer>
    </div>
  );
}
